import { PlusOutlined } from '@ant-design/icons';
import { UploadOutlined } from '@ant-design/icons';
import { Divider,Button, Upload, message } from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { ProductTableListItem } from './data';
import productList from '../funcs/prodcut_list';
import productCreate from '../funcs/product_create';
import productUpdate from '../funcs/product_update';
import CreateForm from './createform/createform';
import UpdateForm from './updateform/updateform';

const TableList: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
  const [stepFormValues, setStepFormValues] = useState({});
  const [productid, setproductid] = useState<string>();
  const columns: ProColumns<ProductTableListItem>[] = [
    {
      title: "品号",
      dataIndex: 'product_number',
      valueType: 'text',
    },
    {
      title: "品名",
      dataIndex: 'product_name',
      valueType: 'text',
    },
    {
      title: "操作",
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
              setproductid(record.id);
              setStepFormValues(record);
              handleUpdateModalVisible(true)
            }}
          >
            修改订单
          </a>
        </>
      ),
    },
  ];

  return (
    <PageContainer>
      <ProTable<ProductTableListItem>
        headerTitle={"查询最新版本"}
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          <Button type="primary" key="primary" onClick={() => handleCreateModalVisible(true)}>
            <PlusOutlined /> 添加产品
          </Button>,
        ]}
        request={(params, sorter, filter) => productList({ ...params, sorter, filter })}
        columns={columns}
      />
      <CreateForm onCancel={() => handleCreateModalVisible(false)} modalVisible={createModalVisible}>
        <ProTable<ProductTableListItem, ProductTableListItem>
          onSubmit={async (value) => {
            const success = await productCreate(value);
            if (success) {
              handleCreateModalVisible(false);
              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          rowKey="key"
          type="form"
          columns={columns}
        />
      </CreateForm>
      <UpdateForm
        onCancel={() => {
          handleUpdateModalVisible(false);
          actionRef.current?.reload();
        }}
        modalVisible={updateModalVisible}
        productid={productid}
        values={stepFormValues}
      />
    </PageContainer>
  );
};

export default TableList;
